<template>
    <div class="app-container">
        <el-row>
            <el-table :data="list">
                <el-table-column label="救援计划标题" prop="name" />
                <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
                <el-table-column label="事件信息" align="center" prop="planDate" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleEventDetail(scope.row)">事件详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="总指挥" align="center" prop="planDate" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.userName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="应急预案" align="center" prop="planName" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.planName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="响应级别" align="center" prop="createTime" width="180">
                    <template slot-scope="scope">
                        <span>{{ responseLevelOption[scope.row.responseLevel - 1].label }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="290">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleDetail(scope.row)">查看总结报告</el-button>
                        <el-button size="mini" type="text" @click="handleDelReport(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        <plan-event-detail ref="planEventDetail" />
    </div>
</template>

<script>
import PlanEventDetail from "./components/PlanEventDetail.vue";
import { getHandleReportList, delHandleReport } from "@/api/response/report";

export default {
    name: "HandleList",
    components: { PlanEventDetail },
    dicts: ["usetypecode_dict", "eventlevelcode_dict", "info_report_channel"],
    data() {
        return {
            list: [],
            // 分页
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            userId: 0,
            responseLevelOption: [
                {
                    label: "Ⅰ级响应",
                    value: 1,
                },
                {
                    label: "Ⅱ级响应",
                    value: 2,
                },
                {
                    label: "Ⅲ级响应",
                    value: 3,
                },
                {
                    label: "Ⅳ级响应",
                    value: 4,
                },
            ],
        };
    },
    created() {},
    mounted() {
        this.userId = this.$store.getters.userId;
        this.getList();
    },
    methods: {
        getList() {
            getHandleReportList(this.queryParams).then(res => {
                this.list = res.rows;
                this.total = res.total;
            });
        },
        // 应急事件详情
        handleEventDetail(data) {
            this.$refs.planEventDetail.showDetail(data.infoId);
        },
        handleDetail(row) {
            this.$tab.openPage("总结报告", "/rate/report/detail", { reportId: row.reportId });
        },
        handleDelReport(row) {
            this.$confirm(`确认删除该总结报告吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$modal.loading("正在删除...");
                delHandleReport(row.reportId).then(res => {
                    this.$modal.closeLoading();
                    this.$message({
                        type: "success",
                        message: "删除成功",
                    });
                    this.getList();
                });
            });
        },
    },
};
</script>

<style scoped lang="scss"></style>
